<template>
<div id="app">
    <h2>小黑记事本</h2>
    <!-- 输入非空的内容，点击+按钮后，如果内容不为空，则将新的记录添加到列表中，同时清空当前输入的内容 -->
    <input type="text" placeholder="请输入非空内容，点击加号记录" v-model="neirong"  @keyup.enter="tianjia"/>
    <button @click="tianjia">+</button>
    <!-- 显示用户待办事项的列表，双击当前列表项或者点击X按钮后，删除当前记录 -->
    <ul class='items' v-for="(item,index) in liebiao" :key="'daiban'+index" @dblclick="shanchu">
      <li class="item">
         {{ index+1 }} · {{ item }} 
        <button class="sub"  @click="shanchu">X</button>
    </li>
    </ul>
    <p @click="qingchu">双击栏目删除对应数据,也可以点我全部清空</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 输入框输入的内容
const neirong=ref("")
// 用户待办列表
const liebiao=ref(["吃饭","睡觉","梦游"])
// 添加事件
const tianjia=()=>{
    if(neirong.value ==""){
        return alert("输入内容不能为空")
    }
    liebiao.value.push(neirong.value)
    neirong.value=""
}
// 删除事件
const shanchu=(index)=>{
    console.log("我被删除了")
    liebiao.value.splice(index,1)
}
// 清空所有的数据
const qingchu=()=>{
    liebiao.value=""
}
</script>




<style lang="scss" scoped>
    #app{
        text-align: center;
    }
    h2 {
      text-align: center;
      margin-top: 100px;
    }

    body {
      text-align: center;
    }

    input {
      width: 300px;
      height: 30px;
      border-radius: 5px;
      font-size: 16px;
      padding-left: 10px;
      outline: none;
      border: 1px solid #000;
    }

    button {
      width: 32px;
      height: 32px;
      border-radius: 5px;
      box-shadow: none;
      border: none;
      font-size: 21px;
      cursor: pointer;
    }

    p {
      color: #aaa;
    }

    .items {
      list-style: none;
      padding: 0;
      width: 350px;
      margin: 20px auto;
    }

    .items .item {
      font-size: 16px;
      line-height: 32px;
      text-align: left;
      cursor: pointer;
      border-bottom: 1px solid #eee;
    }

    button.sub {
      width: 25px;
      height: 25px;
      font-size: 12px;
      float: right;
      margin-top: 5px;
    }

    button.sub:hover {
      color: red;
    }
</style>